<template>
  <el-dialog
    title="选择设备"
    @close="openAccountClose"
    :visible.sync="dialogSelectAccount"
    width="70%"
  >
    <div class="select-account-dia">
      <div class="tree-box">
        <div class="b-box">
          <b>类别</b>
          <b>位置</b>
        </div>
        <div class="tree-box-small">
          <el-tree
            :data="cateTreeData"
            :props="defaultProps"
            accordion
            @node-click="nodeClickCate"
          ></el-tree>
          <el-tree
            :data="posiTreeData"
            :props="defaultProps"
            accordion
            @node-click="nodeClickPosi"
          ></el-tree>
        </div>
      </div>
      <div class="table-box" style="width: 50%">
        <div class="table-big-box">
          <el-table :data="list" height="350" border style="width: 100%">
            <el-table-column prop="deviceNum" label="设备编号" align="center">
            </el-table-column>
            <el-table-column prop="deviceName" label="设备名称" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="selectAccount(scope.row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          v-show="page.total > 0"
          :total="page.total"
          :page.sync="page.currentPage"
          :limit.sync="page.pageSize"
          @pagination="getAccount"
        />
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { fetchCateTree } from "@/api/ems/equipment/category";
import { fetchPosiTree } from "@/api/ems/equipment/position";

import { fetchAccountList } from "@/api/ems/equipment/account";

export default {
  name: "SelectAccount",
  data() {
    return {
      dialogSelectAccount: false,
      cateTreeData: [],
      posiTreeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      list: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条,
      },
      searchForm: {}, // 查询参数
    };
  },
  mounted() {
    fetchCateTree().then((response) => {
      this.cateTreeData = response.data.data;
    });
    fetchPosiTree().then((response) => {
      this.posiTreeData = response.data.data;
    });
    this.getAccount();
  },
  methods: {
    open() {
      this.dialogSelectAccount = true;
    },
    openAccountClose() {
      //父组件修改子组件的值
      this.$emit("update:changeidentityDia", false);
    },
    nodeClickCate(data) {
      this.page.page = 1;
      this.searchForm.categoryId = data.id;
      this.getAccount(this.page, {});
    },
    nodeClickPosi(data) {
      this.page.page = 1;
      this.searchForm.storageLocationId = data.id;
      this.getAccount(this.page, {});
    },
    selectAccount(row) {
      this.$emit("closeSelect", row);
    },
    getAccount(page, params) {
      fetchAccountList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
          },
          params,
          this.searchForm
        )
      ).then((response) => {
        this.list = response.data.data.records;
        this.page.total = response.data.data.total;
      });
    },
  },
};
</script>
<style lang="scss">
.select-account-dia {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .tree-box {
    width: 50%;
    .b-box {
      width: 100%;
      b {
        display: inline-block;
        width: 50%;
        text-align: center;
      }
    }
  }
  .tree-box-small {
    display: flex;
    height: 100%;
    .el-tree {
      width: 50%;
      overflow: auto;
      height: 80%;
    }
  }
  .el-dialog__body {
    height: 80vh;
  }
  .tree-box-small {
    height: 100%;
  }
  .table-box {
    height: 100%;
    .table-big-box {
      overflow: auto;
      height: 80%;
    }
  }
}
</style>